<template>
    <div class="jd-home-hot">
        <div class="top">
            <span>京东秒杀</span>
            <van-count-down :time="100000000">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
            <span>按钮</span>
        </div>
        <div class="content">
            <ul>
                <li v-for="item in hotList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <span>{{ item.sales }}</span>
                </li>
            </ul>

        </div>
    </div>
</template>

<script setup lang="ts">

import { hotListApi } from '@/api/goods'
import { ref, onMounted } from 'vue'

import type { MyHotItem } from '@/config/interface'
const hotList = ref<MyHotItem[]>([])

onMounted(async () => {
    const res = await hotListApi({ limitNum: 10 })
    hotList.value = res.data
    console.log(123, res);

})



// // 倒计时逻辑
// // 定义一个倒计时的时间
// // 注意：将来从你服务器获取的是 时间戳
// const ms = ref<number>(123456)

// //开启定时器来操作ms
// const timer = setInterval(() => ms.value--, 1000)

</script>

<style scoped lang="scss">
.jd-home-hot {
    height: 180px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    background-color: rgb(234, 232, 232);
    background-clip: content-box;
    border-radius: 20px;

    .top {
        height: 50px;
        background: url();
        background-size: 100% 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 10px;

        >.colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
        }

        .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #ee0a24;
            border-radius: 5px;
        }
    }

    .content {
        flex: 1;
        overflow-x: auto;

        //去掉滚动条
        &::-webkit-scrollbar {
            width: 0;
        }

        ul {
            display: flex;
            height: 100%;
            background-color: rgb(234, 232, 232);

            >li {
                height: 100%;
                width: 50px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                background-color: rgb(234, 232, 232);
                padding: 3px;
                background-clip: border-box;
                margin: 0 3px;


                >img {
                    width: 45px;
                    height: 45px;
                    display: block;
                }

                >span {
                    color: red;
                    font-size: 12px;
                    margin-top: 10px;
                }
            }
        }
    }



}
</style>